<template>
  <div ref="chart" style="width: 100%; height: 600px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import axios from '@/axios';

export default {
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const tagResponse = await axios.get('/api/tag/get_all_algorithm_tags_for_liu2/');
        const dependenciesResponse = await axios.get('/api/algorithm/frontend_get_tag_dependencies_for_liu/');

        const nodes = tagResponse.data;
        const links = dependenciesResponse.data;

        const chart = echarts.init(this.$refs.chart);

        const option = {
          title: {
            text: '算法标签依赖关系图'
          },
          tooltip: {},
          series: [
            {
              type: 'graph',
              // legendHoverLink: true,
              layout: 'force',
              roam: true,
              zoom: 0.2,
              animationDurationUpdate : 1000,
              cursor: 'default',
              force: {
                repulsion: [1000, 2000],
                edgeLength: [300, 600],
                gravity: 0.2
              },
              draggable: true,
              symbolSize: 20,
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [0, 5],
              lineStyle: {
                normal: {
                  Color: '#ccc',
                  opacity: 0.9,
                  width: 1,
                  type: 'solid',
                  curveness: 0
                }
              },
              label: {
                show: true,
                minMargin: 100,
                backgroundColor : 'transparent',
                position: 'right',
                formatter: '{c}'
              },
              labelLayout: {
                moveOverlap: 'shiftX'
              },
              emphasis: {
                scale: true,
                focus: 'adjacency'
              },
              autoCurveness: 0.3,
              data: nodes,
              links: links
            }
          ]
        };

        chart.setOption(option);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
  }
};
</script>
